import React, { useEffect, useRef, useState } from 'react';
import {
  Form,
  Input,
  Modal,
  Select,
  Row,
  Col,
  DatePicker,
  InputNumber,
} from 'antd';
import { adminCompanyType, adminPriceType } from '@/utils/constant';
import { useRequest, useUpdateEffect } from '@umijs/hooks';
import {
  apiBalanceDetailGetList,
  apiBankAccountGetList,
} from '@/services/otherServices';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [form] = Form.useForm();
  const [data, setData] = useState([]);
  const [searchValue, setSearchValue] = useState('');
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
      md: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };

  const formItemLayout2 = {
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18, offset: 6 },
      md: { span: 18, offset: 6 },
    },
  };
  const { loading: listLoading, run } = useRequest(apiBankAccountGetList, {
    manual: true,
    throttleInterval: 500,
    onSuccess: (res, params) => {
      setData(res.data);
    },
  });

  useUpdateEffect(() => {
    run({
      account: searchValue,
      pageNo: 1,
      pageSize: 10,
    });
  }, [searchValue]);

  useEffect(() => {
    getForm(form);
  }, []);

  const onValuesChange = (changedValues: any, allValues: any) => {
    if (changedValues.company) {
      run({
        company: changedValues.company,
        pageNo: 1,
        pageSize: 10,
      });
    }

    if (changedValues.account) {
      const result: any = data.filter(
        (n: any) => n.account === changedValues.account,
      );
      form.setFieldsValue({
        ...result[0],
      });
    }
  };

  return (
    <Modal
      afterClose={afterClose}
      destroyOnClose={true}
      confirmLoading={loading}
      width={1024}
      title={editId !== undefined ? '编辑' : '新增'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form
        hideRequiredMark
        style={{ marginTop: 8 }}
        form={form}
        name="basic"
        initialValues={{ type: 1 }}
        onValuesChange={onValuesChange}
      >
        <Row gutter={12}>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请选择分公司' }]}
              label={'分公司'}
              name="company"
            >
              <Select>
                {adminCompanyType.map(item => (
                  <Select.Option key={item.value} value={item.value}>
                    {item.label}
                  </Select.Option>
                ))}
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                style={{ display: 'none' }}
                label={'银行'}
                rules={[{ required: true, message: '请输入银行' }]}
                name="bankAccountId"
              >
                <Input />
              </FormItem>
            </Col>
            <FormItem
              rules={[{ required: true, message: '请选择卡号' }]}
              {...formItemLayout}
              label={'卡号'}
              name="account"
            >
              <Select
                allowClear
                style={{ width: '100%' }}
                showSearch
                onSearch={value => {
                  setSearchValue(value);
                }}
                onSelect={value => {
                  const result: any = data?.filter(
                    (n: any) => n.account === value,
                  );
                  form.setFieldsValue({
                    bankAccountId: result[0].id,
                  });
                }}
                filterOption={false}
                placeholder="选择选择卡号"
              >
                {data &&
                  data.map((item: any) => (
                    <Select.Option key={item.account} value={item.account}>
                      {item.account}
                    </Select.Option>
                  ))}
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入银行' }]}
              {...formItemLayout}
              label={'银行'}
              name="bank"
            >
              <Input disabled={true} />
            </FormItem>
          </Col>

          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请选择日期' }]}
              label={'日期'}
              name="operateTime"
            >
              <DatePicker style={{ width: '100%' }} />
            </FormItem>
          </Col>

          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请填写对方户名' }]}
              label={'对方户名'}
              name="reciprocalAccount"
            >
              <Input style={{ width: '100%' }} />
            </FormItem>
          </Col>

          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请输入付款方式' }]}
              label={'付款方式'}
              name="paymentMethod"
            >
              <Select>
                <Select.Option value={'汇票'}>汇票</Select.Option>
                <Select.Option value={'银行汇款'}>银行汇款</Select.Option>
                <Select.Option value={'现金'}>现金</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'经手人'}
              rules={[{ required: true, message: '请输入经手人' }]}
              name="operator"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'摘要'}
              rules={[{ required: true, message: '请输入摘要' }]}
              name="abstractContent"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout2} style={{ margin: 0 }}>
              <Input.Group compact>
                <FormItem style={{ width: '40%' }} name="type">
                  <Select style={{ width: '100%' }}>
                    <Select.Option value={1}>收入</Select.Option>
                    <Select.Option value={2}>支出</Select.Option>
                  </Select>
                </FormItem>
                <FormItem
                  rules={[
                    ({ getFieldValue }) => ({
                      validator(rule, value) {
                        if (value > 0) {
                          return Promise.resolve();
                        }
                        return Promise.reject('请输入大于 0 的金额');
                      },
                    }),
                  ]}
                  style={{ width: '60%' }}
                  name={'value'}
                >
                  <InputNumber
                    min={0}
                    style={{ width: '100%' }}
                    placeholder={'金额'}
                  />
                </FormItem>
              </Input.Group>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Detail;
